<template>
  <div>
    <!-- loading状态 -->
    <transition name="container-fade" appear>
      <div v-if="loading" class="loading-container">
        <div class="loading-spinner"></div>
        <transition name="text-fade" mode="out-in">
          <div class="loading-message" :key="loadingMessage">{{ loadingMessage }}</div>
        </transition>

        <!-- 轮询超时情况 -->
        <transition name="slide-fade">
          <div v-if="pollTimedOut" class="timeout-message">
            <div class="timeout-message-text">Report taking longer than expected. Please wait.</div>

            <div class="timeout-buttons">
              <button class="retry-btn" @click="restartPolling">Retry</button>
            </div>
          </div>
        </transition>
      </div>
    </transition>

    <!-- 正式内容 -->
    <transition name="container-fade" appear>
      <div class="final-report-container" v-if="!loading && reportUnLockData" ref="report">
        <!-- 结果头部 - 渐变背景 -->
        <div class="result-header-card">
          <h1 class="result-title">{{ reportUnLockData.title }}</h1>
          <p class="result-description" v-html="reportUnLockData.content"></p>
        </div>

        <div class="result-content">
          <!-- 爱情属性结果卡片 -->
          <div class="attribute-result-card">
            <div class="attribute-content">
              <div class="attribute-text">
                <h2>Your love hidden attribute is</h2>
                <div class="attribute-name">&lt; {{ hiddenAttributes.result }} &gt;</div>
              </div>
              <div class="attribute-image">
                <img :src="hiddenAttributes.image | imgPath" alt="Love attribute image" />
              </div>
            </div>
          </div>

          <!-- 摘要部分 -->
          <div v-for="(item, index) in summarize" :key="'summary-' + index">
            <h2 class="section-title">{{ item.title }}</h2>
            <div class="summary-card">
              <div class="attributes-summary summarize">
                <div class="content">
                  <div class="attributes">
                    <div class="con" v-if="item.analysis" v-html="item.analysis"></div>
                    <div class="effect" v-if="item.suggestion">
                      <div class="tit"><img src="../assets/images/suggestion.webp" alt="" /> Suggestion</div>
                      <div class="effect-con" v-html="item.suggestion"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 维度雷达图 -->
          <h2 class="section-title dimension-title">Dimension radar chart</h2>
          <p class="chart-description">The following is the distribution of your love attributes in 5 dimensions</p>
          <div class="radar-chart-card">
            <div class="radar-chart">
              <!-- 使用ECharts雷达图 -->
              <!-- <div id="radar-chart-container" ref="radarChart" style="width: 100%; height: 240px"></div> -->
              <div id="radar-chart-container" ref="radarChart"></div>
            </div>
          </div>

          <!-- 详细情感属性分析 -->
          <h2 class="section-title">In-depth analysis of your emotional attributes</h2>
          <div class="attributes-analysis">
            <!-- 情感属性项 -->
            <div class="attribute-item" v-for="(item, index) in dimensionList" :key="index">
              <div class="attribute-item-connect" v-if="index !== 0">
                <div class="attribute-item-connect-line">
                  <div class="attribute-round round1"></div>
                  <div class="attribute-line"></div>
                  <div class="attribute-round round2"></div>
                </div>
                <div class="attribute-item-connect-line">
                  <div class="attribute-round round1"></div>
                  <div class="attribute-line"></div>
                  <div class="attribute-round round2"></div>
                </div>
              </div>
              <div class="attribute-header">
                <div class="attribute-icon">
                  <img :src="item.image | imgPath" alt="icon" />
                </div>
                <div class="attribute-info">
                  <h3>
                    {{ item.name }} <i class="level-badge high">({{ type[item.type] }})</i>
                  </h3>
                  <div class="score-bar">
                    <div class="score-fill" :style="{ width: item.score + '%' }"></div>
                    <div class="score-value" :style="{ left: item.score + '%' }">{{ item.score }}</div>
                  </div>
                </div>
              </div>
              <div class="attribute-description" :class="{ expanded: expandedItems[index] }">
                <p>
                  {{ item.analysis }}
                </p>

                <div class="suggestion-section">
                  <h4><img src="../assets/images/suggestion.webp" alt="" /> Suggestion</h4>
                  <p>{{ item.suggestion }}</p>
                </div>
              </div>
              <div class="toggle-btn-wrapper">
                <button class="toggle-btn" @click="$set(expandedItems, index, !expandedItems[index])">
                  {{ expandedItems[index] ? 'Close' : 'Expand all' }}
                  <div class="toggle-icon">
                    <template v-if="expandedItems[index]">
                      <img src="../assets/images/arrowup.webp" alt="" />
                    </template>
                    <template v-else>
                      <img src="../assets/images/arrowdown.webp" alt="" />
                    </template>
                  </div>
                </button>
              </div>
            </div>
          </div>

          <!-- 您的情感属性 -->
          <div class="attributes-summary">
            <h2>Your emotional attributes</h2>
            <div class="content">
              <img :src="emotionalAtrributes.image | imgPath" alt="report_emotional.png" />
              <div class="attributes" v-for="(item, index) in emotionalAtrributes.atrributesList" :key="index">
                <span class="title">{{ item.dimension }}</span>
                <div class="con">
                  {{ item.remark }}
                </div>
                <div class="effect">
                  <div class="tit"><img src="../assets/images/effect.webp" alt="" /> Effect</div>
                  <div class="effect-con">
                    {{ item.effect }}
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 测试推荐 -->
          <div class="test-recommendations">
            <h2 class="recommend-title">Test you like</h2>
            <p class="recommend-subtitle">Explore more fun quizzes about yourself and your relationship to help you understand yourself and your partner better</p>

            <div class="test-cards">
              <!-- 推荐测试1 -->
              <div class="test-card" @click="toTest('test_2')">
                <div class="test-image">
                  <img src="../assets/images/tit1_bg.jpg" alt="Love Compatibility Test" />
                </div>
                <div class="test-info">
                  <h3>Elk Sexual Preference Test - Discover Your True Inner Desires</h3>
                  <p>Using scientific assessment methods, gain deep insights into your sexual preference characteristics to better understand yourself and establish healthy, harmonious intimate relationships.</p>
                  <div class="test-stats">
                    <div class="test-count"><img src="../assets/images/fire.webp" alt="" />32,541 people have been tested</div>
                  </div>
                </div>
              </div>

              <!-- 推荐测试2 -->
              <div class="test-card" @click="toTest('test_3')">
                <div class="test-image">
                  <img src="../assets/images/tit2_bg.jpg" alt="Communication style analysis" />
                </div>
                <div class="test-info">
                  <h3>Personality Spectrum Test | Discover Core Traits, Harness Life Potential</h3>
                  <p>ain deep insights into your core personality traits, behavior patterns, and decision-making preferences.</p>
                  <div class="test-stats">
                    <div class="test-count"><img src="../assets/images/fire.webp" alt="" />25,386 people have been tested</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 分享按钮 -->
        <div class="share-buttons" :class="{ 'show-buttons': showButtons }">
          <button class="share-btn" @click="showShare">
            <img src="../assets/images/share.webp" alt="" />
            Share
          </button>
          <button class="send-btn" @click="downloadReport" :disabled="isDownloading">
            <template v-if="isDownloading">
              <div class="loading-spinner-small"></div>
              Downloading...
            </template>
            <template v-else>
              <img src="../assets/images/send.webp" alt="" />
              Download
            </template>
          </button>
        </div>
      </div>
    </transition>

    <!-- 分享弹窗 -->
    <div v-if="showShareModal" class="share-modal-mask">
      <div class="share-modal" ref="shareModal">
        <button class="close-btn" @click="showShareModal = false">
          <img src="../assets/images/close.webp" alt="" />
        </button>
        <img class="modal-illustration" src="../assets/images/share_top_bg.webp" alt="" />
        <div class="modal-title">My Hidden<br />Relationship Trait Is</div>
        <div class="modal-trait">"{{ hiddenAttributes.result }}"</div>
        <div class="modal-trait-tip">Only 1.8% of people worldwide got the<br />same result as me.</div>
        <div class="modal-divider"></div>
        <img class="modal-qrcode" :src="qrCodeDataURL" alt="QR Code" />
        <div class="modal-tip">Press and hold to reveal your hidden traits</div>
        <button class="save-btn" @click="saveShareImage">Save</button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from 'vuex'
import html2canvas from 'html2canvas'
import * as echarts from 'echarts'
import api from '@/utils/api'
import QRCode from 'qrcode'
import { trackAdjustPurchaseEvent } from '../services/adjust'

export default {
  name: 'Report',
  data() {
    let qurey = this.$route.query
    return {
      uid: qurey.uid || localStorage.getItem('uid'),
      orderId: qurey.orderId || '',
      price: qurey.price || 0,
      loading: true,
      pollInterval: null,
      pollCount: 0,
      maxPollAttempts: 15, // 最多轮询15次
      pollDelay: 1500, // 每1.5秒轮询一次
      pollTimedOut: false, // 是否轮询超时
      loadingMessage: 'Generating your report...',
      radarChart: null,
      radarDimensions: ['Emotional', 'Attachment', 'Communication', 'Independence', `Intimacy`],
      radarData: [84, 65, 90, 75, 50],
      expandedItems: {},
      showShareModal: false,
      reportUnLockData: {},
      hiddenAttributes: {},
      summarize: {},
      dimensionList: [],
      emotionalAtrributes: {},
      type: {
        1: 'low',
        2: 'medium',
        3: 'high',
      },
      reportId: '', // 接口返回的报告id
      qrCodeDataURL: '', // 存储生成的二维码数据URL
      defaultQrCodeUrl: 'https://www.quizee.net/#/', // 默认二维码图片URL
      showButtons: false, // 控制按钮显示状态
      isDownloading: false, // 添加下载状态
    }
  },
  computed: {
    ...mapState(['testData']),
    // ...mapGetters(['stageNames', 'resultData']),
  },
  created() {
    // 启动轮询
    this.startPolling()
    ta.track('test_report_show', { report_id: this.uid })
  },
  methods: {
    ...mapMutations(['resetTest']),

    // 开始轮询getEndCopywriting
    startPolling() {
      this.loading = true
      this.pollTimedOut = false
      this.pollCount = 0
      this.loadingMessage = 'Generating your report...'

      // 立即执行一次
      this.getEndCopywriting()

      // 设置轮询间隔
      this.pollInterval = setInterval(() => {
        this.pollCount++

        // 更新loading信息
        if (this.pollCount > 5 && this.pollCount <= 10) {
          this.loadingMessage = 'Processing your report...'
        } else if (this.pollCount > 10) {
          this.loadingMessage = 'Taking longer than expected...'
        }

        // 如果达到最大轮询次数，显示超时信息
        if (this.pollCount >= this.maxPollAttempts) {
          this.stopPolling()
          // this.loadingMessage = 'Report generation failed. Please try again later.'
          // this.loadingMessage = ''
          this.pollTimedOut = true
          // console.log('达到最大轮询次数，停止轮询')
          return
        }

        this.getEndCopywriting()
      }, this.pollDelay)
    },

    // 重新开始轮询
    restartPolling() {
      this.stopPolling()
      this.startPolling()
    },

    // 返回首页
    goBack() {
      this.$router.push('/')
    },

    // 停止轮询
    stopPolling() {
      if (this.pollInterval) {
        clearInterval(this.pollInterval)
        this.pollInterval = null
      }
    },

    // 获取报告数据（修改为轮询版本）
    getEndCopywriting() {
      api
        .getEndCopywritingApi({
          reportId: 1,
        })
        .then((res) => {
          if (res.code == 200) {
            if (res.data && res.data.unlock) {
              if (res.data.firstUnlock) {
                // 第一次解锁报告，GTM上报事件
                if (this.$gtm) {
                  this.$gtm.trackEvent({
                    event: 'test_pay_success',
                    value: this.price,
                  })
                }
                // 埋点上报
                ta.track('test_pay_success', { order_id: this.orderId, report_id: this.uid, price: this.price })
                // 购买成功 调用Adjust事件
                trackAdjustPurchaseEvent(this.price)
              }

              // 数据已解锁，停止轮询
              this.stopPolling()
              this.loading = false

              // 处理数据
              this.reportId = res.data.reportId
              this.reportUnLockData = res.data.reportUnLock

              // 安全地设置hiddenAttributes
              this.hiddenAttributes = this.reportUnLockData.hiddenAttributes || {}

              // 安全解析summarize JSON
              try {
                if (this.reportUnLockData.summarize) {
                  const cleanedJson = this.fixJsonString(this.reportUnLockData.summarize)
                  this.summarize = JSON.parse(cleanedJson)
                } else {
                  this.summarize = []
                }
              } catch (error) {
                this.summarize = []
              }

              // 安全设置其他数据
              this.dimensionList = this.reportUnLockData.dimensionList || []
              if (this.dimensionList.length > 0) {
                this.radarDimensions = this.dimensionList.map((item) => item.name || '')
                this.radarData = this.dimensionList.map((item) => item.score || 0)
              }

              this.emotionalAtrributes = this.reportUnLockData.emotionalAtrributesVO || {}

              // 初始化雷达图
              this.$nextTick(() => {
                this.initRadarChart()
              })
            } else {
              // this.$router.push('/')
            }
          } else {
            // console.error('获取报告数据失败:', res.message || '未知错误')
          }
        })
    },

    // 修复JSON字符串中的控制字符问题
    fixJsonString(str) {
      return str
        .replace(/[\u0000-\u001F\u007F-\u009F]/g, '') // 移除所有控制字符
        .replace(/\\n/g, '\\n') // 确保换行符正确转义
        .replace(/\\r/g, '\\r') // 确保回车符正确转义
        .replace(/\\t/g, '\\t') // 确保制表符正确转义
        .replace(/\\b/g, '\\b') // 确保退格符正确转义
        .replace(/\\f/g, '\\f') // 确保换页符正确转义
        .replace(/\\\\/g, '\\\\') // 确保反斜杠正确转义
        .replace(/\\"/g, '\\"') // 确保引号正确转义
    },

    // 下载报告 把整个页面保存到本地
    // 保存页面的时候把两个按钮去掉，并且确保所有内容都是展开状态
    async downloadReport() {
      this.isDownloading = true // 添加下载状态
      const el = this.$refs.report
      if (!el) {
        this.isDownloading = false
        return
      }

      // 找到并隐藏分享按钮
      const shareButtons = el.querySelector('.share-buttons')
      let buttonsWereVisible = false

      if (shareButtons) {
        buttonsWereVisible = shareButtons.style.display !== 'none'
        shareButtons.style.display = 'none'
      }

      // 保存所有区域的原始展开状态
      const originalExpandState = { ...this.expandedItems }

      // 临时展开所有可折叠区域
      this.dimensionList.forEach((item, index) => {
        this.$set(this.expandedItems, index, true)
      })

      // 找到attribute-name元素并修改样式
      const attributeNameEl = el.querySelector('.attribute-name')
      let originalStyle = null

      if (attributeNameEl) {
        // 保存原始样式
        originalStyle = attributeNameEl.getAttribute('style') || ''

        // 设置为纯色文本，不使用渐变
        attributeNameEl.style.background = 'none'
        attributeNameEl.style.backgroundClip = 'initial'
        attributeNameEl.style.webkitBackgroundClip = 'initial'
        attributeNameEl.style.webkitTextFillColor = '#775ae0'
        attributeNameEl.style.textFillColor = '#775ae0'
        attributeNameEl.style.color = '#775ae0'
      }

      // 等待DOM更新
      await this.$nextTick()

      try {
        // 设置更高的scale以提高清晰度
        const pixelRatio = Math.max(window.devicePixelRatio || 1, 2)

        // 生成图片
        const canvas = await html2canvas(el, {
          useCORS: true,
          backgroundColor: null,
          scrollY: 0,
          scale: pixelRatio,
          allowTaint: true,
          logging: false,
          windowWidth: document.documentElement.offsetWidth,
          windowHeight: document.documentElement.offsetHeight,
        })

        const url = canvas.toDataURL('image/png', 1.0)
        const link = document.createElement('a')
        link.href = url
        link.download = 'relationship_trait.png'
        link.click()

        // 清理资源
        canvas.remove()
        link.remove()
      } catch (error) {
        console.error('下载报告失败:', error)
      } finally {
        // 无论成功失败，都恢复原状态

        // 恢复attribute-name元素样式
        if (attributeNameEl && originalStyle !== null) {
          // 恢复原始样式
          attributeNameEl.setAttribute('style', originalStyle)
        }

        // 恢复按钮显示
        if (shareButtons && buttonsWereVisible) {
          shareButtons.style.display = ''
        }

        // 恢复原始的展开状态
        this.expandedItems = { ...originalExpandState }

        this.isDownloading = false // 重置下载状态
      }
    },

    restartTest() {
      // 重置测试状态
      this.resetTest()
      // 导航到测试页面
      this.$router.push('/test')
    },

    async saveShareImage() {
      const el = this.$refs.shareModal
      if (!el) return
      const canvas = await html2canvas(el, { useCORS: true, backgroundColor: null })
      const url = canvas.toDataURL('image/png')
      const link = document.createElement('a')
      link.href = url
      link.download = 'relationship_trait.png'
      link.click()
    },

    goHome() {
      this.$router.push('/')
    },

    // 初始化雷达图
    initRadarChart() {
      if (this.radarChart) {
        this.radarChart.dispose()
      }

      // 模拟数据加载
      setTimeout(() => {
        // 初始化ECharts实例
        this.radarChart = echarts.init(this.$refs.radarChart)

        // 准备雷达图的指示器
        const indicators = this.radarDimensions.map((name) => {
          return { name, max: 100 }
        })

        // 配置项
        const option = {
          backgroundColor: 'transparent',
          // backgroundColor: '#F8F2FF',
          // color: ['linear-gradient(180deg, rgba(161, 130, 242, 0) 0%, rgba(161, 130, 242, 0.2) 100%)'],
          radar: {
            indicator: indicators,
            shape: 'polygon',
            splitNumber: 5,
            name: {
              // 雷达图各类别名称文本颜色
              textStyle: {
                color: '#775AE0',
                lineHeight: 18, // 设置行高
                padding: [0, 5], // 设置内边距，增加文本周围的空间
                fontFamily: 'NotoSans', // 使用本地字体
                fontSize: 12, // 设置字体大小
                fontWeight: '500', // 设置字体粗细
              },
              formatter: function (text) {
                // 为特定的长文本添加换行符
                switch (text) {
                  case 'Self-Boundary Awareness':
                    return 'Self\nBoundary\nAwareness'
                  case 'Emotional Storm Frequency':
                    return 'Emotional\nStorm\nFrequency'
                  case 'Craving to Project Intensity':
                    return 'Craving to\nProject\nIntensity'
                  case 'Silence Bearing Capacity':
                    return 'Silence\nBearing\nCapacity'
                  default:
                    return text
                }
              },
            },
            splitLine: {
              lineStyle: {
                color: ['#e8dbff'],
              },
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: ['#F8F2FF'],
              },
            },
            axisLine: {
              lineStyle: {
                color: '#e8dbff',
              },
            },
          },
          series: [
            {
              name: 'Love Attributes',
              type: 'radar',

              data: [
                {
                  value: this.radarData,
                  name: 'Your attributes',
                  areaStyle: {
                    color: 'rgba(119, 90, 224, 0.5)',
                  },
                  lineStyle: {
                    width: 1,
                    color: '#775AE0',
                    type: 'solid',
                    opacity: 1,
                    smooth: true,
                  },
                  symbol: 'circle',
                  // 拐点的大小
                  symbolSize: 0,
                  // 小圆点（拐点）设置为白色
                  itemStyle: {
                    // color: 'rgba(176, 127, 235)',
                    // borderColor: 'rgba(255, 255, 255)',
                    // borderWidth: 2,
                  },
                },
              ],
            },
          ],
        }

        // 使用配置项设置图表
        this.radarChart.setOption(option)
      }, 500)

      // 窗口大小变化时，图表自适应调整
      window.addEventListener('resize', this.resizeRadarChart)
    },

    // 调整雷达图大小
    resizeRadarChart() {
      if (this.radarChart) {
        this.radarChart.resize()
      }
    },

    // 生成二维码
    generateQRCode() {
      // 获取当前页面URL或自定义分享URL
      const shareUrl = this.getShareUrl()

      // 生成二维码
      QRCode.toDataURL(shareUrl, {
        width: 180,
        margin: 2,
        color: {
          dark: '#775AE0', // 紫色二维码
          light: '#FFFFFF', // 白色背景
        },
      })
        .then((url) => {
          this.qrCodeDataURL = url
        })
        .catch((err) => {
          // console.error('error:', err)
          // 如果生成失败，回退到静态图片
          // 使用Vite兼容的图片导入方式
          this.qrCodeDataURL = this.defaultQrCodeUrl
        })
    },

    // 获取分享URL
    getShareUrl() {
      // 构建带有报告ID的URL
      const baseUrl = window.location.origin
      // const baseUrl = 'https://www.quizee.net/#/'
      // 构造完整的分享URL
      return baseUrl
    },

    // 显示分享模态框
    showShare() {
      ta.track('test_report_share_click', { TestID: 'Test_1' })
      this.showShareModal = true
      // 显示模态框时生成二维码
      this.$nextTick(() => {
        this.generateQRCode()
      })
    },

    // 检查滚动位置
    checkScroll() {
      // 获取页面滚动位置
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop

      // 当滚动超过300px时显示按钮，可以根据需要调整这个值
      this.showButtons = scrollTop > 300
    },

    // 点击推荐测试
    toTest(testId) {
      ta.track('test_report_rec', { TestID: 'Test_1' })
      if (testId === 'test_2') {
        window.open('https://elk.quizee.net/', '_blank')
      } else if (testId === 'test_3') {
        window.open('https://spectrum.quizee.net/', '_blank')
      }
    },
  },
  mounted() {
    // 添加滚动事件监听
    window.addEventListener('scroll', this.checkScroll)

    // 初始检查一次滚动位置
    this.$nextTick(() => {
      this.checkScroll()
    })

    // 数据加载完成后初始化雷达图
    // setTimeout(() => {
    // this.loading = false
    // 在下一个渲染周期初始化图表，确保DOM已更新
    this.$nextTick(() => {
      this.initRadarChart()
    })
    // }, 1500)

    // 预先生成二维码
    this.$nextTick(() => {
      this.generateQRCode()
    })
  },
  beforeDestroy() {
    // 组件销毁前清除定时器
    this.stopPolling()

    // 组件销毁前移除resize监听
    window.removeEventListener('resize', this.resizeRadarChart)
    // 销毁ECharts实例
    if (this.radarChart) {
      this.radarChart.dispose()
      this.radarChart = null
    }

    if (this.countdownTimer) {
      clearInterval(this.countdownTimer)
    }

    // 移除滚动事件监听
    window.removeEventListener('scroll', this.checkScroll)
  },
}
</script>

<style scoped lang="scss">
.final-report-container {
  min-height: 100vh;
  padding: 12px 16px 55px;
  background: linear-gradient(177deg, #e6e0f5 0%, #dee9f5 100%);
}

.result-content {
  max-width: 600px;
  margin: 0 auto;
  padding-bottom: 40px;
}

/* 结果头部 - 渐变背景 */
.result-header-card {
  // height: 160px;
  max-width: 600px;
  margin: 0 auto;
  margin-bottom: 20px;
  padding: 12px 16px;
  color: white;
  font-family: NotoSans;
  text-align: center;
  background: linear-gradient(115deg, #775ae0 0%, #f78295 100%), #ffffff;
  border-radius: 16px;
}

.result-title {
  font-size: 16px;
  font-weight: 700;
  font-weight: bold;
  font-family: NotoSans-ExtraBold;
}

.result-description {
  font-size: 14px;
  margin-top: 8px;
}

/* 爱情属性结果卡片 */
.attribute-result-card {
  background: white;
  border-radius: 16px;
  padding: 12px 11px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.attribute-content {
  display: flex;
  align-items: center;
}

.attribute-text {
  flex: 1;
}

.attribute-text h2 {
  font-family: NotoSans-ExtraBold;
  text-align: left;
  font-size: 18px;
  font-weight: 800;
  color: #111;
  margin-bottom: 8px;
}

.attribute-name {
  font-family: NotoSans-ExtraBold;
  font-size: 22px;
  font-weight: bold;
  text-align: left;
  line-height: normal;
  letter-spacing: normal;
  background: linear-gradient(101deg, #775ae0 0%, #f78295 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.attribute-image {
  width: 100px;
  height: 100px;
}

.attribute-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 章节标题 */
.section-title {
  font-size: 22px;
  font-weight: 800;
  color: #333;
  margin: 0px 0 12px;
  text-align: center;
  font-family: NotoSans-ExtraBold;
}

/* 摘要卡片 */
.summary-card {
  background: white;
  border-radius: 15px;
  padding: 12px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.summary-card p {
  font-size: 14px;
  line-height: 22px;
  color: #333;
  text-align: left;
}

/* 雷达图卡片 */
.radar-chart-card {
  width: 100%;
  height: 316px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  background: white;

  // background: radial-gradient(50% 50% at 50% 50%, #a283f2 12%, rgba(248, 242, 255, 0) 100%);
  border-radius: 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.dimension-title {
  margin-bottom: 0px;
}
.chart-description {
  display: block;
  width: 90%;
  margin: 8px auto 12px;
  text-align: center;
  font-size: 14px;
  color: #999;
}

.radar-chart {
  width: 100%;
  // display: flex;
  // justify-content: center;
}
#radar-chart-container {
  width: 100%;
  height: 250px;
  margin: 0 auto;
}

/* 属性分析部分 */
.attributes-analysis {
  margin-bottom: 24px;
}

.attribute-item {
  position: relative;
  width: 100%;
  background: white;
  border-radius: 15px;
  padding: 20px;
  margin-bottom: 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  min-height: 371px;
  transition: all 0.4s ease;
  // overflow: hidden;
  box-sizing: border-box !important;

  &.expanded {
    height: auto;
  }

  .attribute-item-connect {
    width: 100%;
    position: absolute;
    top: -35px;
    left: 20px; /* 抵消父盒子左 padding */
    right: 20px; /* 抵消父盒子右 padding */
    width: auto; /* 自动适应剩余空间 */
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    background-color: transparent;

    .attribute-item-connect-line {
      width: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .attribute-round {
      position: relative;
      z-index: 3;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #bcb5f7;
      box-shadow: inset 0px -3px 4px 0px #775ae0;
    }
    .round2 {
      top: -16px;
    }
    .attribute-line {
      position: relative;
      top: -8px;
      z-index: 5;
      width: 6px;
      height: 48px;
      border-radius: 365px;
      background: #f2f0ff;
    }
  }
}

.attribute-content {
  padding-top: 15px;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

.attribute-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 15px;
}

.attribute-icon {
  width: 40px;
  height: 40px;
  margin: 0 15px 6px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.attribute-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.attribute-info {
  flex: 1;
  width: 100%;
}

.attribute-info h3 {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #333333;
  white-space: nowrap;
  text-align: center;
  font-family: NotoSans-SemiBold;
}

.level-badge {
  font-size: 14px;
  color: #7853cf;
  font-weight: 600;
}

.level-badge.high {
  color: #775ae0;
}

.score-bar {
  height: 6px;
  background: #eee;
  border-radius: 3px;
  position: relative;
  margin-top: 46px;
}

.score-fill {
  height: 100%;
  background: #5ae061;
  border-radius: 3px;
  position: absolute;
  left: 0;
  top: 0;
  transition: width 0.5s ease-out;
}

.score-fill.high {
  background: #5ae061;
}

.score-value {
  position: absolute;
  top: -38px;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  background-color: #5ae061;
  padding: 4px 10px;
  border-radius: 6px;
  min-width: 32px;
  text-align: center;
  transform: translateX(-50%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  // z-index: 1;
}

/* 添加三角形指示器 */
.score-value::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #5ae061;
}

.attribute-description {
  font-size: 15px;
  color: #555;
  text-align: left;
  position: relative;
  max-height: 138px;
  overflow: hidden;
  transition: max-height 0.3s ease;

  // &::after {
  //   content: '';
  //   position: absolute;
  //   bottom: 0;
  //   left: 0;
  //   width: 100%;
  //   height: 60px;
  //   background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
  //   pointer-events: none;
  //   transition: opacity 0.3s ease;
  // }

  &.expanded {
    max-height: 2000px;
    // &::after {
    //   opacity: 0;
    // }
  }
}

.toggle-btn-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  position: static;
  margin-top: 20px;
}

.toggle-btn {
  height: 34px;
  padding: 8px 18px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  position: relative;
  left: 0;
  bottom: 0;
  transform: none;
  color: #999999;
  font-size: 13px;
  border-radius: 17px;
  border: none;
}
.toggle-icon {
  width: 16px;
  height: 16px;
  > img {
    width: 100%;
    height: 100%;
  }
}

/* 展开的属性项 */
.suggestion-section {
  margin-top: 20px;
  padding: 12px;
  background: #f8f2ff;
  border-radius: 10px;
  // font-family: NotoSans-SemiBold;
}

.suggestion-section h4 {
  color: #7853cf;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
  display: flex;
  align-items: center;

  font-size: 14px;
  color: #775ae0;
  text-align: left;
  font-family: NotoSans-SemiBold;

  > img {
    width: 20px;
    margin-right: 4px;
    object-fit: contain;
  }
}

.suggestion-section p {
  text-align: left;
  // margin-bottom: 15px;
  line-height: 1.6;
}

/* 测试推荐部分 */
.test-recommendations {
  /* background: white; */
  border-radius: 15px;
  /* padding: 20px; */
  margin-top: 30px;
  /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); */
}

.recommend-title {
  margin-bottom: 10px;
  font-size: 22px;
  font-weight: 800;
  text-align: center;
  color: #111111;
  font-family: NotoSans-ExtraBold;
}

.recommend-subtitle {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
}

.test-cards {
  margin-bottom: 25px;
}

.test-card {
  width: 100%;
  display: flex;
  margin-bottom: 15px;
  align-items: center;
  /* border-bottom: 1px solid #eee; */
  /* padding-bottom: 15px; */
  padding: 12px;
  background-color: #fff;
  border-radius: 12px;
}

.test-image {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  overflow: hidden;
  margin-right: 12px;
}

.test-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.test-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

.test-info h3 {
  font-size: 16px;
  font-weight: 600;
  color: #111111;
  margin-bottom: 4px;
  font-family: NotoSans-ExtraBold;
}

.test-info p {
  font-size: 12px;
  color: #999999;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.test-stats {
  font-size: 12px;
  color: #666666;
  margin-top: 10px;
  .test-count {
    display: flex;
    align-items: center;
    > img {
      width: 16px;
      height: 16px;
      margin-right: 4px;
    }
  }
}

/* 分享按钮 */
.share-buttons {
  width: 100%;
  max-width: 632px;
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 16px;
  display: flex;
  gap: 15px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 999; // 确保在其他内容之上
}

.show-buttons {
  opacity: 1;
  visibility: visible;
}

.share-btn,
.send-btn {
  height: 52px;
  display: flex;
  align-items: center;
  flex: 1;
  padding: 12px 0;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  // cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  > img {
    height: 24px;
    margin-right: 8px;
    object-fit: contain;
  }
}

.share-btn {
  background: #7853cf;
  color: white;
  border: none;
}

.send-btn {
  background: #fd5c63;
  color: white;
  border: none;
}

.attributes-summary {
  // margin-bottom: 12px;
  text-align: left;
  .content {
    width: 100%;
    padding: 16px;
    background-color: #fff;
    border-radius: 15px;
    > img {
      display: block;
      width: 100%;
      height: 180px;
      border-radius: 15px;
      object-fit: cover;
    }
  }
  .attributes {
    margin-top: 20px;
    > .title {
      font-size: 14px;
      font-weight: bold;
      color: #775ae0;
      font-family: NotoSans-SemiBold;
    }
    > .con {
      margin-top: 8px;
      font-size: 14px;
      line-height: 22px;
      color: #333333;
    }
    .effect {
      padding: 16px;
      margin-top: 8px;
      border-radius: 12px;
      background: #f8f2ff;
      > .tit {
        display: flex;
        align-items: center;
        font-size: 14px;
        font-weight: bold;
        color: #775ae0;
        text-align: left;
        font-family: NotoSans-SemiBold;
        > img {
          height: 20px;
          object-fit: cover;
        }
      }
      .effect-con {
        margin-top: 8px;
        font-size: 14px;
        line-height: 22px;
        color: #333333;
        text-align: left;
      }
    }
  }
}
.summarize {
  .content {
    padding: 0;
  }
  .attributes {
    margin-top: 0px;
    margin-bottom: 0;
  }
}

.attributes-summary h2 {
  margin-bottom: 12px;
  font-size: 22px;
  font-weight: 800;
  text-align: center;
  color: #111111;
  font-family: NotoSans-ExtraBold;
}

.share-modal-mask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.share-modal {
  background: #fff7f8;
  // border-radius: 16px;
  width: 340px;
  // padding: 24px 16px 32px 16px;
  padding: 0px 0px 16px;
  position: relative;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}
.close-btn {
  position: absolute;
  right: 0px;
  top: -40px;
  background: none;
  border: none;
  font-size: 24px;
  // cursor: pointer;
  > img {
    width: 30px;
    height: 30px;
    object-fit: contain;
  }
}
.modal-illustration {
  width: 100%;
  // max-width: 220px;
  height: 143px;
  object-fit: cover;
  margin: 0 auto;
}
.modal-title {
  font-size: 20px;
  font-weight: 600;
  margin: 8px 0 16px 0;
  font-family: NotoSerif-Medium;
}
.modal-trait {
  font-size: 22px;
  font-weight: bold;
  margin: 0 0 8px 0;
  color: #e5486b;
  font-family: serif;
  font-family: BerkshireSwash-Regular;
}
.modal-trait-tip {
  font-size: 12px;
  color: #666;
  font-family: NotoSans-Regular;
}
.modal-divider {
  width: 80%;
  height: 1px;
  background: #ffe3e5;
  margin: 12px auto;
}
.modal-qrcode {
  width: 110px;
  height: 110px;
  margin: 5px auto 6px;
}
.modal-tip {
  font-size: 12px;
  color: #999;
}
.save-btn {
  min-width: 200px;
  position: absolute;
  bottom: -66px;
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  color: #111111;
  border: none;
  border-radius: 112px;
  height: 52px;
  font-size: 18px;
  font-weight: 600;
  // cursor: pointer;
  font-family: NotoSans-SemiBold;
  line-height: 52px;
  text-align: center;
}

// 添加loading样式
.loading-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #e2e4f5;
  transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow: hidden;
  position: relative;
  .loading-message {
    text-align: left;
    padding: 0 16px;
    max-width: 80%;
    margin: 10px auto;
    font-size: 16px;
    font-family: NotoSans;
  }
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #7b5cff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

// 超时信息样式
.timeout-message {
  padding: 0 16px;
  margin-top: 30px;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  max-width: 80%;
  line-height: 22px;
  color: #333333;
  will-change: transform, opacity, height;
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  .timeout-message-text {
    text-align: left !important;
    font-size: 16px;
    font-family: NotoSans;
  }
}

.timeout-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 20px;
}

.retry-btn,
.back-btn {
  padding: 10px 20px;
  border-radius: 20px;
  border: none;
  font-weight: bold;
  // cursor: pointer;
  transition: all 0.3s ease;
  font-family: NotoSans-SemiBold;
}

.retry-btn {
  background-color: #775ae0;
  color: white;
}

.back-btn {
  background-color: #f2f2f2;
  color: #555;
}

.retry-btn:hover {
  background-color: #6247d0;
}

.back-btn:hover {
  background-color: #e5e5e5;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

// 修改过渡效果为从下到上淡入淡出
.slide-fade-enter-active {
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateY(30px);
  opacity: 0;
}

// 添加loading文字过渡效果
.text-fade-enter-active,
.text-fade-leave-active {
  transition: opacity 0.5s ease;
}
.text-fade-enter,
.text-fade-leave-to {
  opacity: 0;
}

// 添加容器整体过渡效果
.container-fade-enter-active,
.container-fade-leave-active {
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.container-fade-enter,
.container-fade-leave-to {
  opacity: 0;
}

.loading-spinner-small {
  width: 18px;
  height: 18px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top: 3px solid #ffffff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 8px;
  display: inline-block;
}
</style>
